<template>
    <div class="mybody" style="padding: 16px;">
        <div class="index-right">
            <el-skeleton :rows="8" size="small" :loading="data.isFisrt" animated>
                <div class="mycard">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div style="width: 340px;"  class="grid-content ep-bg-purple">
                                <p style="color: #999DA2;position: relative;right: 125px;top: 15px;font-size: 18px;">会员人数
                                </p>
                                <p class="iconfont icon-huiyuan"
                                    style="color: black;font-size: 28px;position: relative;top: 30px;right: 120px;">{{data.hy.count}}
                                </p>
                                <p style="color: black;font-size: 20px;float: right;position: relative;bottom: 8px;right: 24px;">+{{ data.hy.percentage}}%</p>
                            </div>
                        </el-col>
                         <el-col :span="6">
                            <div style="width: 340px;" class="grid-content ep-bg-purple">
                                <p style="color: #999DA2;position: relative;right: 125px;top: 15px;font-size: 18px;">最佳会员
                                </p>
                                <p style="color: black;float: right;position: relative;right: 16px;font-size: 18px;bottom: 12px;">{{ data.besthy.name }}</p>
                                <p class="iconfont icon-youzhi"
                                    style="color: black;font-size: 28px;position: relative;top: 30px;right: 70px;">{{data.besthy.Recharge}}元
                                </p>
                                <p style="color: black;font-size: 20px;float: right;position: relative;bottom: 8px;right: 24px;">{{ data.besthy.prev}}</p>
                            </div>
                        </el-col> 
                        <el-col :span="6">
                            <div style="width: 340px;" class="grid-content ep-bg-purple">
                                <p style="color: #999DA2;position: relative;right: 120px;top: 15px;font-size: 18px;">最佳员工
                                </p>
                                <p style="color: black;float: right;position: relative;right: 16px;font-size: 18px;bottom: 12px;">{{ data.bestuser.name }}</p>
                                <p class="iconfont icon-youzhi"
                                    style="color: black;font-size: 28px;position: relative;top: 30px;right: 90px;">{{data.bestuser.count}}
                                </p>
                            </div>
                        </el-col> 
                        <el-col :span="6">
                            <div style="width: 340px;" class="grid-content ep-bg-purple">
                                <p style="color: #999DA2;position: relative;right: 120px;top: 15px;font-size: 18px;">今日充值
                                </p>
                             
                                <p class="iconfont icon-chongzhi1"
                                    style="color: black;font-size: 28px;position: relative;top: 30px;right: 100px;">{{data.todayRecharge.money}}元
                                </p>
                            </div>
                        </el-col> 
                    </el-row>
                </div>
                <div style="padding-top:48px ;">
                    <el-button type="primary" style="float: right;position: relative;top: 20px;right: 8px;"
                    @click="event.model">新增</el-button>
                <div class="tabletitle" style="color:black">
                    <div style="padding: 16px;">
                        会员类型: <el-select v-model="data.selecttype" placeholder="请选择" size="large" style="width: 240px">
                            <el-option  v-for="item in data.type" :key="item.id"  :label="item.name+'('+item.explain+')'" :value="item.id" />
                        </el-select>
                        <el-input class="myinput" v-model="data.key" placeholder="请输入会员名称" />
                    </div>
                </div>
                <el-table border v-loading="data.loading" :data="data.data">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="会员名称">
                        <template #default="scope">
                            <el-tag disable-transitions="true" type="danger">
                                {{ scope.row.name }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="创建时间">
                        <template #default="scope">
                            <el-tag disable-transitions="true">
                                {{ scope.row.createtime }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="会员等级">
                        <template #default="scope">
                            <el-tag disable-transitions="true">
                                {{ scope.row.viplevel }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="充值金额">
                        <template #default="scope">
                            <el-tag type="danger" disable-transitions="true" v-if="scope.row.recharge_amount===''||scope.row.recharge_amount===0||scope.row.recharge_amount===null">
                               0元
                            </el-tag>
                            <el-tag v-else type="primary">
                                    {{ scope.row.recharge_amount}}元
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="手机号">
                        <template #default="scope">
                            <el-tag disable-transitions="true">
                                {{ scope.row.phone }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="微信">
                        <template #default="scope">
                            <el-tag disable-transitions="true">
                                {{ scope.row.wechat }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="备案人">
                        <template #default="scope">
                            <el-tag disable-transitions="true">
                                {{ scope.row.record }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" fixed="right" label="操作" prop="value">
                        <template #default="scope">
                            <el-button type="primary" @click="event.Up_dic(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                    
                    
                </el-table>
                <div class="paging">

                    <!-- <el-pagination  background layout="prev, pager, next" :total="data.pages.total" /> -->
                    <el-pagination background style="position: absolute;right: 200px;"
                        v-model:current-page="data.pages.page" v-model:page-size="data.pages.limit"
                        layout="prev, pager, next" :total="data.pages?.total" />
                    <div style="color: black;display: flex;float: right;position: relative;right: 16px;">
                        <div style="margin-right: 8px;position: relative;top: 4px;">前往</div><el-input
                            style="width:60px ;align-content: center;" v-model="data.pages.page"></el-input>
                        <div style="padding-left: 8px;position: relative;top: 4px;">页</div>
                    </div>

                </div>
              
                </div>
               
            </el-skeleton>
        </div>

       

        <!-- 新增子级字典 -->
        <el-dialog v-model="data.isModel" :modal="data.isModel">
            <el-descriptions title="新增会员" direction="vertical" :column="1" border>
                <el-descriptions-item label="名称">
                    <el-input type="text" v-model="data.name">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="地址">
                    <el-input type="text" v-model="data.address">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="手机号">
                    <el-input type="text" max="11" v-model="data.phone">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="微信">
                    <el-input type="text" v-model="data.wx">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="qq">
                    <el-input type="text" v-model="data.qq">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="学校">
                    <el-input type="text" v-model="data.school">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="负责人">
                    <el-select v-model="data.myuser" placeholder="请选择备案人" size="large" style="width: 240px">
                        <el-option v-for="item in data.alluser" :key="item.uid" :label="item.uname" :value="item.uid" />
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="备用">
                    <el-input type="text" v-model="data.desc">
                    </el-input>
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.isModel = false">返回</el-button>
                    <el-popconfirm @confirm="event.add" title="确定要保存吗？">
                        <template #reference>
                            <el-button type="primary">
                                确定
                            </el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </template>
        </el-dialog>
        <!-- 会员的编辑 -->
        <div>
            <el-dialog v-model="data.isOpen" :modal="data.isOpen">
                <el-descriptions title="编辑会员" direction="vertical"  :column="2"  border>
                    <el-descriptions-item label="名称" :span="1">
                        <el-input type="text" v-model="data.dic.name">
                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号" :span="1">
                        <el-input type="text" v-model="data.dic.phone">
                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="地址" :span="1">
                        <el-input type="text" v-model="data.dic.address">
                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="微信" :span="1">
                        <el-input type="text" v-model="data.dic.wechat">
                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="QQ" :span="1">
                        <el-input type="text" v-model="data.dic.qq">
                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="学校" :span="1">
                        <el-input type="text" v-model="data.dic.school">
                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="详情" :span="2">
                        <el-input type="text" v-model="data.dic.desc">
                        </el-input>
                    </el-descriptions-item>
                </el-descriptions>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="event.handleClose">关闭</el-button>
                        <el-popconfirm @confirm="event.editdic" title="确定要保存吗？">
                            <template #reference>
                                <el-button type="primary">
                                    确定
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-dialog>
        </div>
        <!-- 会员详情 -->
        <!-- <el-dialog v-model="data.isDetail" :modal="data.isDetail">
            <el-descriptions title="会员详情" direction="vertical" :column="2" border>
                <el-descriptions-item label="名称">
                    <el-input type="text" v-model="data.name">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="地址">
                    <el-input type="text" v-model="data.address">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="手机号">
                    <el-input type="text" max="11" v-model="data.phone">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="微信">
                    <el-input type="text" v-model="data.wx">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="qq">
                    <el-input type="text" v-model="data.qq">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="学校">
                    <el-input type="text" v-model="data.school">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="有效时间(天)">
                    <el-input type="number" v-model="data.time">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="负责人">
                    <el-select v-model="data.myuser" placeholder="请选择备案人" size="large" style="width: 240px">
                            <el-option v-for="item in data.alluser" :key="item.uid" :label="item.uname"
                                :value="item.uid"/>
                        </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="备用">
                    <el-input type="text" v-model="data.desc">
                    </el-input>
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.isModel = false">返回</el-button>
                    <el-popconfirm @confirm="event.add" title="确定要保存吗？">
                        <template #reference>
                            <el-button type="primary">
                                确定
                            </el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </template>
        </el-dialog> -->

    </div>
</template>

<script setup lang="ts">

import { Add_Dic, Delete_Dic, Edit_Dic, Get_Singlr_Dic_Type, Up_Dic } from '@/api/dic';
import type { dictionary_Dto } from '@/Dto/Request/dic/dictionary_Dto';
import Api_Code from '@/Dto/Response/Api_code';
import { onMounted, reactive, ref, watchEffect } from 'vue';
import { useRoute } from 'vue-router';
import { msg } from '@/utils/msg';
import { ElMessage, ElNotification } from 'element-plus';
import { AddVIP, GetVIPTypeById, UpdateVIP, GetAllVipType, GetAllVIP, ExpireVIP, hfvip, gethycard, getexpirehycard, getbesthy, getmincard, bestuser, todayRecharge } from '@/api/vip';
import router from '@/router';


const route = useRoute();
const data = reactive<dictionary_Dto>({
    isFisrt: true,
    hy:{
        count:0,
        percentage:0
    },
    besthy:{
        name:'',
        Recharge:0,
        prev:0
    },
    bestuser:{
        name:'',
        count:0,
    },
    todayRecharge:{
        money:0
    },
    isFirst: true,
    fhvid: '',
    hfday: 30,
    pages: {
        page: 1,
        limit: 5,
        total: 0
    },
    loading: false,
    did: '',
    data: [],
    isModel: false,
    isDetail: false,
    isOpen: false,
    name: '',
    myuser: '',
    key: '',
    selecttype: '',
    alluser: [],
    address: '',
    phone: '',
    wx: '',
    qq: '',
    desc: '',
    school: '',
    allviptype: [],
    explain: '',
    type: {},
    dic: {
        id: '',
        name: '',
        phone:'',
        wechat:'',
        qq:'',
        school:'',
        desc:'',
        address:''
    }
})



const methods = {
    async bind() {
        if (data.pages.page === "" || data.pages.page === null) {
            data.pages.page = 1
        }
        data.loading = true
        const res = await GetAllVIP({
            key: data.key,
            type: data.selecttype,
            page: data.pages.page,
            limit: data.pages.limit,
        })
        data.data = res.data.data;
        data.pages.total = res.data.total;
        data.alluser = res.data.alluser
        const res2 = await GetAllVipType({})
        data.allviptype = res2.data
        data.type = res2.data;
        data.loading = false
        // if (res.code === Api_Code.ok) {
        //     ///所有会员
        //     data.data = res.data.list;
        //     ///当前会员类型
        //     data.type = res.data.type;
        //     ///所有用户

        data.alluser = res.data.alluser;
        data.isFirst = false;
        //     ///所有会员类型
        // }
        data.loading = false
    },
    async gethycard(){
        const result=await gethycard({});
        data.hy.count=result.data.count;
        data.hy.percentage=result.data.percentage
    },
    async bestuser(){
        const result=await bestuser({});
        data.bestuser.name=result.data.record;
        data.bestuser.count=result.data.count;
        console.log(data.bestuser)
    },
    async besthy(){
        const result =await getbesthy({});
        data.besthy.Recharge=result.data.sum;
        data.besthy.prev=result.data.prev;
        data.besthy.name=result.data.name;
    },
    async todayRecharge(){
        const result=await todayRecharge({});
        data.todayRecharge.money=result.data;
        data.isFirst = false;
    }
}

const event = {
    //子级字典编辑
    async editdic() {
        console.log(data.dic.name, 'name')
        data.isOpen = false
        data.loading = true
        const res = await UpdateVIP({
            id: data.dic.id,
            name: data.dic.name,
            phone:data.dic.phone,
            address:data.dic.address,
            wechat:data.dic.wechat,
            qq:data.dic.qq,
            school:data.dic.school,
            desc:data.dic.desc
        })
        if (res.code === Api_Code.ok) {
            methods.bind()
            data.loading = false
            msg(res)
        } else {
            msg(res)
        }
    },
    //关闭子级字典编辑模态框
    handleClose() {
        data.isOpen = false
    },
    ///打开子级字典编辑模态框
    Up_dic(dic: any) {
        data.isOpen = true;
        data.dic.id = dic.id
        data.dic.name = dic.name;
        data.dic.wechat = dic.wechat;
        data.dic.school = dic.school;
        data.dic.phone = dic.phone;
        data.dic.qq = dic.qq;
        data.dic.address = dic.address;
        data.dic.explain = dic.explain;
    },
    //新增字典
    async add() {
        // data.isModel = false
        if (data.name == '' || data.address == '' || data.school == '' || data.qq == '' || data.desc == '' || data.wx == '' || data.phone == '' || data.myuser == '') {
            ElMessage.error("请完整填写数据");
            return;
        }
        data.loading = true
        const res = await AddVIP({
            name: data.name || '',
            address: data.address || '',
            school: data.school || '',
            wechat: data.wx || '',
            qq: data.qq || '',
            phone: data.phone || '',
            record: data.myuser || '',
            desc: data.desc || '',
            cdid: data.type.dId || '',
            remark: '',
        })
        data.isModel = false
        if (res.code === Api_Code.ok) {
            methods.bind()
            setTimeout(() => {
                data.loading = false
            }, 1000)
            data.name = '';
            data.address = '';
            data.school = '';
            data.qq = '';
            data.wx = '';
            data.desc = '';
            data.phone = '';
            data.myuser = '';
            msg(res)
            data.isModel = false
        } else {
            data.phone = '';
            msg(res)
            data.loading = false
        }
        methods.gethycard();

    },
    //打开模态框
    model() {
        data.isModel = true;
    },

    //编辑类别
    edit() {
        data.isEdit = true
    },
    //删除字典
    async del_dic(id: string) {

        data.loading = true
        const res = await Delete_Dic({
            ids: [id]
        })
        if (res.code === Api_Code.ok) {
            methods.bind()
            data.loading = false
            msg(res)
        } else
            data.loading = false
        msg(res)
    },
    //修改字典类别
    async save() {
        data.loading = true

        const res = await Up_Dic({
            id: route.params.id.toString(),
            name: data.data.name,
            key: data.data.key,
            value: data.data.value
        })
        if (res.code === Api_Code.ok) {
            data.isEdit = false
            data.loading = false
            msg(res)
        } else {
            data.isEdit = false
            data.loading = false
            msg(res)
        }
    }

}

onMounted(async () => {
     methods.gethycard();
     methods.bind();
     methods.besthy();
     methods.bestuser();
    await methods.todayRecharge();
    data.isFisrt = false;
})
watchEffect(async () => {
    await methods.bind();
})
</script>

<style scoped>
.mybody {
    overflow: hidden;
    display: flex;
    height: calc(100vh - 76px - 60px);
    background-color: #F0F2F5;
}

.index-left {
    width: 230px;
    padding-left: 10px;
    border-right: 1px solid #eee;
    position: relative;

}

.tabletitle {
    border: 1px solid #EBEEF5;
    height: 70px;
}

.index-right {
    flex: 1;
    padding: 10px;
    background-color: #fdfbfb;
}
.mincard{
    width: 95%;
    display: flex;
    margin-top: 6px;
    height: 45px;
    background-color: white;
    position: relative;
    left: 10px;
    top: 20px;
}
.myinput {
    width: 400px;
    height: 40px;
    position: absolute;
    left: 450px;
}
.grid-content{
    height: 135px;
    width: 365px;
    background:#E9EDF2;
    border-radius: 8px;
    margin: 6px;
    transition: all 0.3s ease
}
.grid-content:hover{
    transform: translateY(-4px) scale(1.02);
box-shadow: rgba(0, 0, 0, 0.2) 0px 14px 24px;

}
.el-col {
    text-align: center;
    height: 100px;
}
.mycard {
    /* padding-top: 20px; */
    display: flex;
    margin-bottom: 8px;
}
.paging {
    margin-top: 16px;
}

.status {
    float: right;
    padding-right: 16px;
}

</style>